﻿@{
    ViewBag.Title = "Templating";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<ol class="breadcrumb">
    <li><a href="/Home/Home">Home</a></li>
    <li><a href="/KnockoutJs/Introduction">KnockOut JS</a></li>
    <li class="active">Templating</li>
</ol>

<div class="bottomspace">
    <h1 class="text-left">Templating</h1>
</div>
<div id="template">
    <p>The template binding populates the associated DOM element with the results of rendering a template. Templates are a simple and convenient way to build sophisticated UI structures - possibly with repeating or nested blocks - as a function of your view model data.</p>
    <p>There are two main ways of using templates:</p>
    <ul>
        <li><p>Native templating is the mechanism that underpins foreach, if, with, and other control flow bindings. Internally, those control flow bindings capture the HTML markup contained in your element, and use it as a template to render against an arbitrary data item. This feature is built into Knockout and doesn’t require any external library.</p></li>
        <li><p>String-based templating is a way to connect Knockout to a third-party template engine. Knockout will pass your model values to the external template engine and inject the resulting markup string into your document. See below for examples that use the jquery.tmpl and Underscore template engines.</p></li>
    </ul>
</div>
<div id="templateexample">
    <h3>Example</h3>
    <p>Normally, when you’re using control flow bindings (foreach, with, if, etc.), there’s no need to give names to your templates: they are defined implicitly and anonymously by the markup inside your DOM element. But if you want to, you can factor out templates into a separate element and then reference them by name:</p>
    <div class="divcolor">
        <pre><code>&lt;h2&gt;Participants&lt;/h2&gt;<br />Here are the participants:<br />&lt;div data-bind="template: { name: 'person-template', data: buyer }"&gt;&lt;/div&gt;<br />&lt;div data-bind="template: { name: 'person-template', data: seller }"&gt;&lt;/div&gt;<br /></code></pre>
    </div>
    <p>In this example, the person-template markup is used twice: once for buyer, and once for seller. Notice that the template markup is wrapped in a &lt;script type="text/html"&gt;— the dummy type attribute is necessary to ensure that the markup is not executed as JavaScript, and Knockout does not attempt to apply bindings to that markup except when it is being used as a template.</p>
    <div class="divcolor">
        <pre><code>&lt;script type="text/html" id="person-template"&gt;<br />&lt;h3 data-bind="text: name"&gt;&lt;/h3&gt;<br />&lt;p&gt;Credits: &lt;span data-bind="text: credits"&gt;&lt;/span&gt;&lt;/p&gt;<br />&lt;/script&gt;</code></pre>
    </div>
    <p>It’s not very often that you’ll need to use named templates, but on occasion it can help to minimise duplication of markup.</p>
    <div class="divcolor">
        <pre><code>&lt;script type="text/javascript"&gt;<br />function MyViewModel() {<br />this.buyer = { name: 'Franklin', credits: 250 };<br />this.seller = { name: 'Mario', credits: 5800 };<br />}<br />ko.applyBindings(new MyViewModel());<br />&lt;/script&gt;</code></pre>
    </div>
</div>